<template>
  <div class="personal-center-container">
    <el-row :gutter="20">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="line-chart-line" />
              信息
            </div>
          </div>
          <vab-query-form>
            <vab-query-form-left-panel :span="12"></vab-query-form-left-panel>
            <vab-query-form-right-panel :span="12">
              <el-form :inline="true" :model="queryForm" @submit.native.prevent>
                <el-form-item>
                  <el-input
                    v-model.trim="queryForm.MatchString"
                    clearable
                    placeholder="请输入"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button
                    icon="el-icon-search"
                    type="primary"
                    @click="queryData"
                  >
                    查询
                  </el-button>
                </el-form-item>
              </el-form>
            </vab-query-form-right-panel>
          </vab-query-form>
          <el-table :data="list" style="width: 100%">
            <el-table-column label="工单完成状态" prop="OrderState" />
            <el-table-column label="工单编号" prop="OrderId" />
            <el-table-column label="所属订单" prop="ProduceOrderId" />
            <el-table-column label="订单名称" prop="ProductName" />
            <el-table-column label="产品编号" prop="ProductId" />
            <el-table-column label="产品数量" prop="Num" />
            <el-table-column label="产品名称" prop="ProductName" />
            <el-table-column label="完成数量" prop="FinihsNum" />
            <el-table-column label="完成率" prop="FinishRate" />
            <el-table-column label="合格数量" prop="QualifiedNum" />
            <el-table-column label="合格率" prop="QualifiedRate" />
            <el-table-column label="创建者" prop="Creator" />
            <el-table-column label="创建时间" prop="CreateTime" />
            <el-table-column
              align="center"
              label="操作"
              show-overflow-tooltip
              width="200"
            >
              <template slot-scope="scope">
                <el-button text type="primary" @click="handleDetail(scope.row)">
                  详情
                </el-button>
              </template>
            </el-table-column>
            <template slot="empty">
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
          <el-pagination
            background
            :current-page="queryForm.pageNo"
            :layout="layout"
            :page-size="queryForm.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-card>
      </el-col>
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card shadow="hover" skeleton>
          <div class="card-header" slot="header">
            <div>
              <vab-icon icon="line-chart-line" />
              今日质检统计
            </div>
          </div>
          <vab-chart
            :init-options="initOptions"
            :option="option"
            theme="vab-echarts-theme"
          />
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible"
      title="设备信息"
      width="60%"
      :before-close="handleClose"
    >
      <el-row :gutter="20">
        <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
          <el-descriptions direction="vertical" :column="2" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                工单编号
              </template>
              {{ FinishOrderState.OrderId }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                所属订单
              </template>
              {{ FinishOrderState.ProductOrderId }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                产品编号
              </template>
              {{ FinishOrderState.ProductId }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                产品名称
              </template>
              {{ FinishOrderState.ProductName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                工单数量
              </template>
              {{ FinishOrderState.PartNum }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                完成数量
              </template>
              {{ FinishOrderState.FinishNum }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                完成率
              </template>
              {{ FinishOrderState.FinishRate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                合格数量
              </template>
              {{ FinishOrderState.QualifiedNum }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                合格率
              </template>
              {{ FinishOrderState.QualifiedRate }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                导出检测报表
              </template>
              <el-button type="primary" size="mini" @click="export1()">
                导出
              </el-button>
            </el-descriptions-item>
          </el-descriptions>
          <el-table
            :data="FinishOrderState.PartList"
            height="500"
            style="width: 100%"
          >
            <el-table-column label="零件编号" prop="PartId" />
            <el-table-column label="是否合格" prop="IsQualified" />
            <el-table-column
              align="center"
              label="操作"
              show-overflow-tooltip
              width="200"
            >
              <template #default="{ row }">
                <el-button text type="primary" @click="handleDetail1(row)">
                  详情
                </el-button>
              </template>
            </el-table-column>
            <template #empty>
              <el-empty class="vab-data-empty" description="暂无数据" />
            </template>
          </el-table>
        </el-col>
        <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
          <el-row :gutter="20">
            <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
              <chart1 />
            </el-col>
            <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
              <chart1 />
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      :close-on-click-modal="false"
      :visible="dialogVisible1"
      title="随机抽检"
      width="50%"
      :before-close="handleClose1"
    >
      <el-row :gutter="20" style="margin-top: 30px">
        <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
          <el-descriptions direction="vertical" :column="4" border>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                {{ PartId }}
              </template>
              {{ IsQualified }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="el-icon-user"></i>
                状态
              </template>
              合格
            </el-descriptions-item>
          </el-descriptions>
          <div>
            <div style="text-align: center; margin: 20px 0">
              三坐标检测结果（对应相应响应数据中的）
            </div>
            <el-table :data="threedimensionalItem" border>
              <el-table-column prop="PartId" label="零件编号"></el-table-column>
              <el-table-column
                label="测量个数"
                prop="OfMeased"
              ></el-table-column>
              <el-table-column prop="OfTol" label="公差个数"></el-table-column>
              <el-table-column
                prop="OfOutTol"
                label="超差个数"
              ></el-table-column>
              <el-table-column
                prop="OfTolBlade"
                label="Blade公差个数"
              ></el-table-column>
              <el-table-column
                prop="OfOutTolBlade"
                label="Blade公差超差个数"
              ></el-table-column>
              <el-table-column
                prop="recordingTime"
                label="时间"
              ></el-table-column>
            </el-table>
            <div style="text-align: center; margin: 20px 0">
              手检台检测结果（对应响应数据）
            </div>
            <el-table :data="ManualDetectItem" border>
              <el-table-column
                prop="ActualValue"
                label="实测值"
              ></el-table-column>
              <el-table-column
                label="检验人"
                prop="CheckPerSon"
              ></el-table-column>
              <el-table-column
                prop="CheckTime"
                label="检验时间"
              ></el-table-column>
              <el-table-column prop="PartId" label="零件号"></el-table-column>
              <el-table-column
                prop="RequestValue"
                label="要求值"
              ></el-table-column>
              <el-table-column prop="Reserve1" label="预留1"></el-table-column>
              <el-table-column prop="Reserve2" label="预留2"></el-table-column>
              <el-table-column prop="Reserve3" label="预留3"></el-table-column>
              <el-table-column prop="Reserve4" label="预留4"></el-table-column>
              <el-table-column prop="Reserve5" label="预留5"></el-table-column>
              <el-table-column prop="Reserve6" label="预留6"></el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="12">
          <el-timeline>
            <el-timeline-item
              v-for="(activity, index) in ProcessLog"
              :key="index"
            >
              <div v-for="(item, index) in activity.ActionLogList">
                <p>动作编号：{{ item.ActionNo }}</p>
                <p>动作名：{{ item.ActionName }}</p>
                <p>开始时间：{{ item.StartTime }}</p>
                <p>结束时间：{{ item.EndTime }}</p>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import chart1 from './components/chart1'
  import VabChart from '@/extra/VabChart'
  import {
    QualityManageList,
    OrderIdChoose,
    PartDetailsInfo,
    PartChoose,
    ExportReport,
    Analysis,
  } from '@/api/quality'

  export default {
    components: {
      VabChart,
      chart1,
    },
    data() {
      return {
        tableData: [
          {
            PartId: 1,
            OfMeased: 10,
            OfTol: 20,
            OfOutTol: 20,
            OfTolBlade: 20,
            OfOutTolBlade: 20,
            recordingTime: '2023-12-5',
          },
        ],
        tableData2: [
          {
            ActualValue: 1,
            CheckPerSon: 1,
            CheckTime: 1,
            Partid: 1,
            RequestValue: 1,
            Reserve1: 1,
            Reserve2: 1,
            Reserve3: 1,
            Reserve4: 1,
            Reserve5: 1,
            Reserve6: 1,
          },
        ],
        initOptions: {
          renderer: 'svg',
        },
        option: {
          title: {
            text: '今日质检统计',
          },
          xAxis: {
            type: 'category',
            data: [],
          },
          yAxis: {
            type: 'value',
          },
          legend: {
            data: ['产品编号', '合格数量', '不合格数量'],
          },
          series: [
            {
              name: '合格数量',
              data: [],
              type: 'bar',
              label: {
                show: true,
                position: 'top',
              },
            },
            {
              name: '不合格数量',
              data: [],
              type: 'bar',
              label: {
                show: true,
                position: 'top',
              },
            },
          ],
        },

        list: [],
        total: 0,

        layout: 'total, sizes, prev, pager, next, jumper',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          title: '',
          MatchString: '',
        },
        dialogVisible: false,
        dialogVisible1: false,
        PartId: '',
        IsQualified: '',
        FinishOrderState: {},

        ProcessLog: [],
        PartList: [],
        TodayQualityAnalysis: [],

        ManualDetectItem: [],
        threedimensionalItem: [],
      }
    },

    created() {
      this.fetchData()
      Analysis().then((res) => {
        this.TodayQualityAnalysis = res.TodayQualityAnalysis
        let ProductId = []
        let QualifiedNum = []
        let UnqualifedNum = []
        this.TodayQualityAnalysis.map((v) => {
          ProductId.push(v.ProductId)
          QualifiedNum.push(v.QualifiedNum)
          UnqualifedNum.push(v.UnqualifedNum)
        })
        this.option.xAxis.data = ProductId
        this.option.series[0].data = QualifiedNum
        this.option.series[1].data = UnqualifedNum
      })
    },
    methods: {
      export1(row) {
        ExportReport({ OrderId: this.FinishOrderState.OrderId }).then((res) => {
          console.log(res)
        })
      },
      handleClose() {
        this.dialogVisible = false
      },
      handleClose1() {
        this.dialogVisible1 = false
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      handleDetail(row) {
        OrderIdChoose({ OrderId: row.OrderId }).then((res) => {
          console.log('OrderIdOrderId', res)
          this.FinishOrderState = res
          // this.IsQualified = res.IsQualified
          // this.PartId = res.PartId
          this.dialogVisible = true
        })
      },
      handleDetail1(row) {
        this.threedimensionalItem = []
        PartDetailsInfo({ PartId: row.PartId }).then((res1) => {
          this.ProcessLog = res1.ProcessLog.StepLogList
          PartChoose({ PartId: row.PartId }).then((res) => {
            this.threedimensionalItem.push(res.threedimensionalItem)
            console.log('threedimensionalItem', this.threedimensionalItem)
            this.ManualDetectItem = res.ManualDetectItem
            this.dialogVisible1 = true
          })
        })
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      fetchData() {
        const params = {
          Index: this.getPage(this.queryForm.pageNo, this.queryForm.pageSize),
          Count: this.queryForm.pageSize,
          MatchString: this.queryForm.MatchString,
        }
        QualityManageList(params).then((res) => {
          console.log(res)
          this.list = res.FinishOrderState
          this.total = res.TotalCount
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  $base: '.personal-center';
  #{$base}-container {
    padding: 0 !important;
    background: $base-color-background !important;

    #{$base}-user-info {
      padding: $base-padding;
      text-align: center;

      :deep() {
        .el-avatar {
          img {
            cursor: pointer;
          }
        }
      }

      &-full-name {
        margin-top: 15px;
        font-size: 24px;
        font-weight: 500;
        color: #262626;
      }

      &-description {
        margin-top: 8px;
      }

      &-follow {
        margin-top: 15px;
      }

      &-list {
        margin-top: 18px;
        line-height: 30px;
        text-align: left;
        list-style: none;

        h5 {
          margin: -20px 0 5px 0;
        }

        :deep() {
          .el-tag {
            margin-right: 10px !important;
          }

          .el-tag + .el-tag {
            margin-left: 0;
          }
        }
      }
    }

    #{$base}-item {
      display: flex;

      i {
        font-size: 40px;
      }

      &-content {
        box-sizing: border-box;
        flex: 1;
        margin-left: $base-margin;

        &-second {
          margin-top: 8px;
        }
      }
    }
  }

  .personal-center-container {
    padding: 0 !important;
    background: $base-color-background !important;
    :deep() {
      .echarts {
        width: 100%;
        height: 400px;
      }
    }
  }
</style>
